<template>
	<div class="dr">
		<van-pull-refresh
			v-model="refreshing"
			@refresh="threeOnRefresh"
			:loosing-text="$t('pages.home.releaseToRefresh', '释放即可刷新...')"
			:loading-text="$t('pages.home.loading', '加载中...')"
			:pulling-text="$t('pages.home.pullDownRefresh', '下拉即可刷新...')"
		>
			<ZeroData
				:drafts="true"
				v-if="!props.getToTaskLi?.length && !refreshing && !loading"
			/>
			<van-list
				v-model:loading="loading"
				:finished="finished"
				:loading-text="$t('pages.home.loading', '加载中...')"
				:finished-text="$t('pages.home.noMore', '没有更多了')"
				@load="onLoad"
				v-else
			>
				<UACard
					:drafts="true"
					:draft="true"
					v-for="i in props.getToTaskLi"
					:key="i"
					:value="i"
					@draftsDelete="draftsDelete"
			/></van-list>
		</van-pull-refresh>
		<van-popup
			v-model:show="show"
			round
			position="bottom"
			:style="{ height: '30%' }"
		>
			<div class="popup">
				<div class="tit">
					{{ $t('approval.DeleteDraft', '是否删除该草稿') }}
				</div>
				<div class="smallTit">
					{{ $t('approval.AreYouSureDelete', '删除后无法恢复，确定删除吗？') }}
				</div>
				<div class="button">
					<button @click="show = false" class="canvel">
						{{ $t('approval.Cancel', '取消') }}</button
					><button @click="delOk" class="ok">
						{{ $t('approval.ConfirmDeletion', '确认删除') }}
					</button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { deleteDrafts } from '../serve/api'
import { showToast } from 'vant'
import UACard from './UACard'
import ZeroData from './zeroData.vue'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps(['getToTaskLi'])
const emits = defineEmits(['emitrefreshDrafts', 'getNewDrf', 'refresh'])
const show = ref(false)
const NowdraftsDelete = ref('')
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const threeOnRefresh = () => {
	emits('refresh')
}
const draftsDelete = (a: string) => {
	NowdraftsDelete.value = a
	show.value = true
}
const delOk = async () => {
	let data = await deleteDrafts({ draft_list: [NowdraftsDelete.value] })
	if (data) {
		show.value = false
		showToast($t('pages.process.tip.deleteSuccess', '删除成功'))
		emits('emitrefreshDrafts')
	} else {
		show.value = false
	}
}
const onLoad = () => {
	emits('getNewDrf')
}
defineExpose({ refreshing, loading, finished })
</script>

<style lang="less" scoped>
.dr {
	overflow: scroll;
	height: calc(100vh - 140px);
}
.popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	.tit {
		color: #1f2329;
		font-family: PingFang SC;
		font-size: 18px;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: center;
		margin-top: 24px;
	}
	.smallTit {
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: center;
		color: #646a73;
		margin-top: 14px;
	}
	.button {
		margin-top: 30px;
		.canvel {
			height: 48px;
			width: 156px;
			background: #e8eaed;
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			color: #1f2329;
			border-radius: 4px;
			border: 0;
		}
		.ok {
			height: 48px;
			width: 157px;
			background: #ff6459;
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			color: #ffffff;
			border-radius: 4px;
			border: 0;
			margin-left: 14px;
		}
	}
}
.van-list {
	min-height: 80vh;
	padding-bottom: 80px;
	animation: aaa 0.3s forwards ease-in-out;
}
@keyframes aaa {
	0% {
		margin-top: -60px;
	}
	100% {
		margin-top: 0;
	}
}
</style>
